<template>
  <!-- https://animate.style/ 抖动效果网址-->
  <!-- <button @click="flag = !flag">el-switch</button> -->
  <button  @click="add">ADD</button>
  
  <button @click="del">DEL</button>

  <div class="wraps">

  <!-- tag="section" 套一层DIV -->
   <transition-group leave-active-class="animate__animated animate__hinge" enter-active-class="animate__animated animate__bounceIn">
   <div class="item" :key="item" v-for="item in list">{{ item }}</div>
   </transition-group>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, defineAsyncComponent} from 'vue'
import 'animate.css'
let flag = ref<number>(1)
let count = ref<number>(0)
const list = reactive<number[]>([1,2,3,4])
const add = ()=>{
  list.push(list.length+1)
  count.value++
}
const del = ()=>{
  list.pop()
}
</script>

<style lang="less">
 html,body,#app{
   height: 100%;
   overflow: hidden;
 }
 .box{
  width: 200px;
  height: 200px;
  background: red;
 }
 .e-from{
  width: 0;
  height: 0;
  transform: rotate(360deg);

 }
 .e-active{
  transition: all 1.5s ease;
 }
 .e-to{
  width: 200px;
  height: 200px;
 }
 .l-from{
  width: 200px;
  height: 200px;
  transform: rotate(360deg);

 }
 .l-active{
  transition: all 5s ease;

 }
 .l-to{
  width: 0;
  height: 0;
 }
.wraps{
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
  border:1px solid #ccc;
  .item{
      margin:10px;
      font-size: 20px;
  }
}

</style>